<template>
  <div ref="codeEditBox" class="codeEditBox" :class="'codeEditBox1'"/>
</template>

<script>
import _ from 'lodash'
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
import Designer from "./designer";
// import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'

export default {
  props: {
    modelValue: String,
    language: String,
    expressMode: {
      defaults: false,
      required: false,
      type: Boolean
    },
  },
  emits: [
    'update:modelValue',
    'editor-mounted',
    'change',
    'editor-blur',
    'editor-focus'
  ],
  mounted() {
    this.init()
  },
  watch: {
    'modelValue': {
      handler(newVal) {
        if (newVal === this.editor.getValue()) {
          // 防止递归
          return
        }
        this.editor.setValue(newVal ?? '')
      }
    },
    'language': {
      handler(newVal) {
        if (this.editor) {
          this.setLanguage(newVal)
        }
      }
    },
    'loadTypeAction': {
      handler(newVal) {

      }
    }
  },
  unmounted() {
    if (this.editor) {
      this.editor.dispose()
      this.editor = null
    }
  },
  methods: {
    focus() {
      this.editor?.focus()
    },
    insertText(text) {
      if (!this.editor) {
        return
      }
      const position = this.editor.getPosition()
      this.editor.executeEdits('', [{
        range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
        text: text,
        forceMoveMarkers: true
      }])
    },
    init() {
      const option = {
        value: this.modelValue,
        language: this.language ?? 'javascript',
        minimap: {
          enabled: false
        },
        selectOnLineNumbers: true,
        renderSideBySide: false,
        automaticLayout: true,
      }
      if (this.$props.expressMode === true) {
        _.extend(option, {
          lineNumbers: 'off',
          hideCursorInOverviewRuler: true,
          overviewRulerBorder: false,
          glyphMargin: false,
          lineDecorationsWidth: 0,
          fontSize: "19px",
          roundedSelection: false,
          scrollBeyondLastLine: false,
          disableMonospaceOptimizations: true,
        })
      }

      // TsLanguageSupport.instance.initOneEditor()
      console.log('monaco editor create', this.$refs.codeEditBox, option)
      this.editor = monaco.editor.create(this.$refs.codeEditBox, option)

      // console.log('monaco editor create', this.editor)

      // 监听值的变化
      this.editor.onDidChangeModelContent(() => {
        const value = this.editor.getValue() // 给父组件实时返回最新文本
        this.$emit('update:modelValue', value)
        this.$emit('change', value)
      })

      this.editor.onDidBlurEditorWidget((e) => {
        this.$emit('editor-blur', e)
      })
      this.editor.onDidFocusEditorWidget((e) => {
        this.$emit('editor-focus', e)
      })

      this.$emit('editor-mounted', this.editor)
      // .monacoInitFinished()
    },
    updateOptions(options) {
      if (this.editor && options) {
        this.editor.updateOptions(options)
      }
    },
    setLanguage(lang) {
      if (this.editor && lang) {
        monaco.editor.setModelLanguage(this.editor.getModel(), lang)
      }
    },
  }
}
</script>

<style>
.codeEditBox {
  width: 100%;
  flex: 1;
  overflow-y: auto;
}
</style>